<template>
	<div class="pj">
		<div class="zonghe">
			<div class="zuo">
				<p style="font-size: 2.6rem;color: orange;">5</p>
				<p style="font-size: 1rem;">综合评价</p>
				<p style="font-size: .7rem;margin-top: 0.5rem;color: #999999;">高于周边商家70%</p>
			</div>
			<div class="you">
				<p style="font-size: 1rem;margin-top: .5rem;color: #999999;">服务态度 <img src="../assets/pf.png" alt=""></p>
				<p style="font-size: 1rem;margin-top: 0.2rem;color: #999999;">菜品评价 <img src="../assets/pf.png" alt=""></p>
				<p style="font-size: 1rem;margin-top: 0.7rem;color: #999999;">送达时间: 分钟</p>
			</div>
		</div>
		<!-- ----------------------------------- -->
		<div>
			<div class="quanbu">
				<span style="color:  #fff;background: #3190e8;">全部(473)</span>
				<span>满意(453)</span>
				<span style="background: rgba(0,0,0,0.07);">不满意(20)</span>
				<span>有图(2)</span>
				<span>味道好(47)</span>
				<span>送货快(32)</span>
				<span>分量足(18)</span>
				<span>包装精美(15)</span>
				<span>干净卫生(15)</span>
				<span>食材新鲜(15)</span>
				<span>服务不错(11)</span>
			</div>
			<div style="display: flex;" class="ttt">
				<span style="width: 20%;">
					<img src="../assets/default.jpg" alt="" style="width: 2.5rem;border-radius: 50%;margin-left: 1rem;">
				</span>
				<ul style="width: 70%;">
					<li>
						<div style="overflow: hidden;">
							<span>***123***</span>
							<span style="float: right;font-size: 0.9rem;color:#CCCCCC;">2017-02-10</span>
						</div>
						<p style="font-size: 0.2rem;">⭐⭐⭐⭐⭐按时送达</p>
					</li>
					<li>
						<div style="display: inline-block;">
							<img src="../assets/tui.png" alt="" style="width: 4rem;">
							<p class="ji" style="color:#CCCCCC">鸡腿鸡腿鸡腿</p>
						</div>
						<div style="display: inline-block;">
							<img src="../assets/pisa.png" alt="" style="width: 4rem;">
							<p class="pi" style="color:#CCCCCC">披萨披萨披萨</p>
						</div>
					</li>
				</ul>
			</div>
			<div style="display: flex;" class="ttt">
				<span style="width: 20%;">
					<img src="../assets/default.jpg" alt="" style="width: 2.5rem;border-radius: 50%;margin-left: 1rem;">
				</span>
				<ul style="width: 70%;">
					<li>
						<div style="overflow: hidden;">
							<span>***123***</span>
							<span style="float: right;font-size: 0.9rem;color:#CCCCCC;">2017-02-10</span>
						</div>
						<p style="font-size: 0.2rem;">⭐⭐⭐⭐⭐按时送达</p>
					</li>
					<li>
						<div style="display: inline-block;">
							<img src="../assets/tui.png" alt="" style="width: 4rem;">
							<p class="ji" style="color:#CCCCCC">鸡腿鸡腿鸡腿</p>
						</div>
						<div style="display: inline-block;">
							<img src="../assets/pisa.png" alt="" style="width: 4rem;">
							<p class="pi" style="color:#CCCCCC">披萨披萨披萨</p>
						</div>
					</li>

				</ul>
			</div>
			<div style="display: flex;" class="ttt">
				<span style="width: 20%;">
					<img src="../assets/default.jpg" alt="" style="width: 2.5rem;border-radius: 50%;margin-left: 1rem;">
				</span>
				<ul style="width: 70%;">
					<li>
						<div style="overflow: hidden;">
							<span>***123***</span>
							<span style="float: right;font-size: 0.9rem;color:#CCCCCC;">2017-02-10</span>
						</div>
						<p style="font-size: 0.2rem;">⭐⭐⭐⭐⭐按时送达</p>
					</li>
					<li>
						<div style="display: inline-block;">
							<img src="../assets/tui.png" alt="" style="width: 4rem;">
							<p class="ji" style="color:#CCCCCC">鸡腿鸡腿鸡腿</p>
						</div>
						<div style="display: inline-block;">
							<img src="../assets/pisa.png" alt="" style="width: 4rem;">
							<p class="pi" style="color:#CCCCCC">披萨披萨披萨</p>
						</div>
					</li>

				</ul>
			</div>
		</div>
	</div>
</template>


<script>
	export default {
		name: 'pj',
		data: function() {
			return {
				datas: [],
				src: "https://fuss10.elemecdn.com/1/b5/",
			}
		},
		created: function() {
			window.console.log(this);
			let obj = this;
			//axios 完成数据的get网络请求
			this.$axios({
					url: 'https://elm.cangdu.org/ugc/v2/restaurants/1/ratings?offset=0&limit=10',
					method: 'GET',
				})
				.then(function(res) {
					window.console.log(res);
					obj.datas = res.data;
				})
		},

	}
</script>

<style scoped>
	* {
		padding: 0;
		margin: 0;
		list-style: none;
	}

	.pingjia {
		background: rgba(0, 0, 0, 0.4);
	}

	.zonghe {
		display: flex;
		width: 100%;
		height: 7.5rem;
	}

	.zuo {
		width: 50%;
		background: white;
		text-align: center;
		padding-top: 1rem;
	}

	.you {
		width: 50%;
		background: white;
	}

	.quanbu {
		background: white;
		margin-top: 1rem;
	}

	.quanbu span {
		display: inline-block;
		color: #6d7885;
		font-size: 0.8rem;
		background: #ebf5ff;
		margin: 0.5rem 0.2rem 0.2rem 1rem;
		padding: 0.3rem 0.5rem;
		border-radius: 0.3rem;
	}

	.ttt {
		width: 100%;
		padding-top: 1.5rem;
		border-top: 1px solid #f1f1f1;
		background: white;
	}

	.pi,
	.ji {
		width: 3rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 0.6rem;
		border: 0.14px solid rgba(0, 0, 0, 0.2);
		padding: 0.2rem;
		border-radius: 10%;
	}
</style>
